<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { GetDataDetail, PostCreateAccount, PutDetailsRedact } from '@/api/modules/clientAccountLabel.ts'
import { GetOptionData } from '@/api/modules/clientAdminAccount.ts'
import detailStore from '@/store/modules/cacheData'

const route = useRoute()
const router = useRouter()
const id = route.query.id as string
// const imgDomain = 'https://qw.wx.meikeai.net'
const detailData = detailStore()

interface Form {
  labelName: string
  labelType: number
  adminId: number
  id: number
}
const ruleForm = ref<Form>({
  labelName: '',
  labelType: 1,
  adminId: 0,
  id: 0,
})
interface option {
  mobile: string
  realname: string
  username: string
  id: number
}
const optionList = ref<option[]>([])

// 提交
async function SubmitData() {
  if (ruleForm.value.labelType !== 5) {
    ruleForm.value.adminId = 0
  }
  if (id) {
    PutDetailsRedact({ ...ruleForm.value }).then((res: any) => {
      if (res.statusCode === 200) {
        ElMessage.success('修改成功')
        router.push('/clientAccountLabel')
      }
      else {
        ElMessage.error(`修改失败。${res.errors}`)
      }
    })
  }
  else {
    PostCreateAccount({ ...ruleForm.value }).then((res: any) => {
      if (res.statusCode === 200) {
        ElMessage.success('添加成功')
        detailData.EmptyDrawactAccountLabel()
        router.push('/clientAccountLabel')
      }
      else {
        ElMessage.error(`添加失败。${res.errors}`)
      }
    })
  }
}

watch(ruleForm, (newValue) => {
  detailData.RememberDrawactAccountLabel(newValue)
}, { deep: true })

onMounted(async () => {
  try {
    if (id) {
      GetDataDetail(id).then((res: any) => {
        if (res.statusCode === 200) {
          ruleForm.value = res.data
        }
      })
    }
    else {
      ruleForm.value = detailData.GetDrawactAccountLabelData()
    }
    const optionData: any = await GetOptionData()
    if (optionData.statusCode === 200) {
      optionList.value = optionData.data
    }
  }
  catch (error) {
    console.error('error: ', error)
  }
})
</script>

<template>
  <div>
    <PageHeader :title="id ? '编辑' : '添加'" />
    <ElForm label-position="top" label-width="80px">
      <PageMain title="基础信息">
        <ElRow :gutter="20">
          <ElCol :md="8">
            <ElFormItem label="标签名">
              <el-input v-model="ruleForm.labelName" style="max-width: 300px;" placeholder="请输入标签名" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="标签类型">
              <el-select v-model="ruleForm.labelType" placeholder="请选择" style="max-width: 300px;" clearable>
                <el-option label="基础标签" :value="1" />
                <el-option label="需求偏好" :value="2" />
                <el-option label="销售标签" :value="3" />
                <el-option label="售后标签" :value="4" />
                <el-option label="自定义" :value="5" />
              </el-select>
            </ElFormItem>
          </ElCol>
          <ElCol v-if="ruleForm.labelType === 5" :md="8">
            <ElFormItem label="绑定">
              <el-select v-model="ruleForm.adminId" placeholder="请选择" style="max-width: 300px;" clearable>
                <el-option v-for="item in optionList" :key="item.id" :label="item.realname" :value="item.id" />
              </el-select>
            </ElFormItem>
          </ElCol>
        </ElRow>
      </PageMain>
    </ElForm>
    <div style="height: 60px;" />
    <FixedActionBar>
      <ElButton type="primary" size="large" @click="SubmitData()">
        提交
      </ElButton>
    </FixedActionBar>
  </div>
</template>

<style scoped>
.from-list {
  position: relative;
  left: 3%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 20px;
  width: 95%;
  padding: 20px 30px;
  background-color: white;

  >div {
    min-height: 60px;
  }

  .button {
    padding-top: 20px;
  }
}
</style>
